<template>
  <div class="employer-dashboard">
    <el-container>
      <el-header>
        <el-row>
          <el-col :span="20">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal"
                     @select="handleSelect">
              <el-menu-item index="1">职位管理</el-menu-item>
              <el-menu-item index="2">推荐牛马</el-menu-item>
              <el-menu-item index="3">寻找牛马</el-menu-item>
              <el-menu-item index="4">沟通</el-menu-item>
              <el-menu-item index="5">我的牛马</el-menu-item>
            </el-menu>
          </el-col>
          <el-col :span="4">
            <el-dropdown trigger="click" style="position: absolute;right: 20px;">
              <span style="font-size:19px;font-weight: bold;">
                {{user.nickname}}
                <el-icon><arrow-down/></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="changePassword" style="color: #000000; font-weight: 500; border-radius: 4px; transition: background 0.3s ease;">修改密码</el-dropdown-item>
                  <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-col>
        </el-row>
      </el-header>
      <el-main>
        <component :is="currentView" />
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import PositionManagement from '@/views/Employer/PositionManagement.vue';
import Recommend from '@/views/Employer//Recommend.vue';
import Search from '@/views/Employer//Search.vue';
import Communication from '@/views/Employer//Communication.vue';
import MyTalent from '@/views/Employer//MyTalent.vue';
import router from "@/router";
const user =localStorage.user?JSON.parse(localStorage.user):null;
const activeIndex = ref('');
const currentView = ref(PositionManagement);

const handleSelect = (key, keyPath) => {
  activeIndex.value = key;
  switch (key) {
    case '1':
      currentView.value = PositionManagement;
      break;
    case '2':
      currentView.value = Recommend;
      break;
    case '3':
      currentView.value = Search;
      break;
    case '4':
      currentView.value = Communication;
      break;
    case '5':
      currentView.value = MyTalent;
      break;
    default:
      break;
  }
};

const logout = () => {
  if (confirm('您确定要退出登录吗?')) {
    // 清除存在 localStorage 中的数据
    localStorage.removeItem('user');
    // 退出后跳转至登录页
    window.location.href = '/';
  }
};
const changePassword = () => {
  router.push('/change-password');
};
</script>

<style scoped>
.employer-dashboard {
  padding: 20px;
}

.el-menu-demo {
  background-color: #42b983;
  color: #fff;
}

.el-menu-demo {
  margin-left: 20px;
}
</style>
